<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于WebServer的数据采集和控制</title>
    <script>
        function tem()
        {
            xhr.onload = function()
            {
                var su = xhr.responseText;
                console.log(su);
                document.getElementById("t").value = su;
            }
        }
        function led1()
        {
            var led = "led 1";
            var xhr = new XMLHttpRequest();
            var url ="";
            xhr.open("post",url,true);
            xhr.send(led);
        }
        function led0()
        {
            var led = "led 0";
            var xhr = new XMLHttpRequest();
            var url ="";
            xhr.open("post",url,true);
            xhr.send(led);
        }
        function beep1()
        {
            var beep = "beep 1";
            var xhr = new XMLHttpRequest();
            var url ="";
            xhr.open("post",url,true);
            xhr.send(beep);
        }
        function beep0()
        {
            var beep = "beep 0";
            var xhr = new XMLHttpRequest();
            var url ="";
            xhr.open("post",url,true);
            xhr.send(beep);
        }
        function get_data()
        {
            var data = "get";
            var xhr = new XMLHttpRequest();
            var url ="";
            xhr.open("post",url,true);
            xhr.send(data);
            xhr.onload = function()
            {
                var met= xhr.responseText;
                var values = met.split(' ');
                document.getElementById("t").value = values[0];
                document.getElementById("h").value = values[1];
            }
        }
        function history()
        {
            var data = "history";
            var xhr = new XMLHttpRequest();
            var url ="";
            xhr.open("post",url,true);
            xhr.send(data);
            xhr.onload = function()
            {
                var met= xhr.responseText;
                document.getElementById("his").value = met;
            }
        }
        function del()
        {
            var data = "del";
            var xhr = new XMLHttpRequest();
            var url ="";
            xhr.open("post",url,true);
            xhr.send(data);
        }
    </script>
</head>
<body>
    <div style=" height: 500px; width: 1200px; text-align: center;" >
    <h1 style="text-align: center;">基于WebServer的数据采集和控制</h1>
    <div>
        tem:
        <input type="text" name="tem" id="t" value=""><br>
        <br>
        hum:
        <input type="text" name="hum" id="h" value="">
        <br>
        <br>
        <input type="button" name="data" value="获取温度湿度" onclick="get_data()">
        <br>
        <br>
        LED
        <label for="1">
            开 <input type="radio" name="LED" id="1" onclick="led1()">
        </label>
        <label for="2"></label>
            关 <input type="radio" name="LED" id="2" onclick="led0()">
        </label>
        <br>
        BEEP
        <label for="3">
            开 <input type="radio" name="BEEP" id="3" onclick="beep1()">
        </label>
        <label for="4"></label>
            关 <input type="radio" name="BEEP" id="4" onclick="beep0()">
        </label>
        <br>
        <br>
        <input type="button" name="data" value="获取历史记录" onclick="history()">
        <input type="button" name="del" value="清空历史记录" onclick="del()">
        <br>
        <br>
        <!-- <input type="text" name="his" value="" style="height: 200px; width: 400px;white-space: pre-wrap;" id="his" > -->
        <textarea type="text" name="history" rows="20" cols="80" id="his" value=""></textarea>
    <br>
    </div>
    </div>
</body>
</html>